:root {
    --item-padding: 45px;
}

:local(.sidebar-padding) {
  padding-left: var(--item-padding);
  padding-right: var(--item-padding);
}

:local(.sidebar-margin) {
  margin-left: var(--item-padding);
  margin-right: var(--item-padding);
}

:local(.sidebar) {
    composes: py2 from "style";
    width: 345px;
    background-color: rgb(248, 252, 253);
    border-right: 1px solid rgb(223, 238, 245);
    color: #606E7B;
}

:local(.sidebar) a {
    text-decoration: none;
}

:local(.breadcrumbs) {
    composes: sidebar-padding;
}

:local(.item),
:local(.sectionTitle) {
    composes: flex align-center from "style";
    composes: py2 from "style";
    composes: sidebar-padding;
}

:local(.item) {
    composes: transition-color from "style";
    composes: transition-background from "style";
    font-size: 1em;
    color: #CFE4F5;
}

:local(.item) :local(.icon) {
  line-height: 1em;
}

:local(.sectionTitle) {
    composes: my1 from "style";
    composes: text-bold from "style";
    font-size: 16px;
}


:local(.item.selected),
:local(.item.selected) :local(.icon),
:local(.sectionTitle.selected),
:local(.item):hover,
:local(.item):hover :local(.icon),
:local(.sectionTitle):hover {
    background-color: #E3F0F9;
    color: #2D86D4;
}

:local(.divider) {
    composes: my2 from "style";
    composes: border-bottom from "style";
    composes: sidebar-margin;
}

:local(.name) {
    composes: ml2 text-bold from "style";
    color: #9CAEBE;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

:local(.item):hover :local(.name),
:local(.item.selected) :local(.name) {
    color: #2D86D4;
}

:local(.icon) {
    composes: flex-no-shrink from "style";
}


:local(.noLabelsMessage) {
  composes: relative from "style";
  composes: text-centered from "style";
  composes: p2 my3 from "style";
  composes: text-brand-light from "style";
  composes: sidebar-margin;
}
